<template>
    <div>
        

        <el-card style="margin-top:3%; margin-left:5%; margin-right:5%"  >
            <el-row>
                <el-col style="font-weight:bold;margin-left:42%; margin-top:2%">用户注册</el-col>
            </el-row>

            <el-form :model="form" status-icon :rules="rules" ref="formref" label-width="100px" style="margin-right:10px; margin-top:8%" >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" show-password>
                    <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass" show-password>
                    <el-input type="password" v-model="form.checkPass" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="用户类型" prop="usertype">
                    <el-select v-model="form.userType" placeholder="请选择">
                       <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item style="margin-left:10%">
                  <el-popover
                    placement="top"
                    width="160"
                    v-model="visible">
                    <p>确认信息填写无误吗</p>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                         <el-button type="primary" @click="submitForm">注册</el-button>
                    </div>
                    <el-button slot="reference">注册</el-button>
                    </el-popover>
                   
                    <el-button @click="resetForm('formref')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    export default {
        data() {

            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.form.checkPass !== '') {
                        this.$refs.formref.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var vertifyCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入验证码'));
                } else if (value !== this.vertify) {
                    callback(new Error('验证码错误！'));
                } else {
                    callback();
                }
            };

            return {
                        options: [{
                value: '选项1',
                label: 'Buyer'
                }, {
                value: '选项2',
                label: 'Seller'
                }],
                form: {
                    username: '',
                    checkid: '',
                    username: '',
                    address: '',
                    password: '',
                    checkPass: '',
                    userType:''
                },

                vertify: '',

                rules: {
                    userId: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {pattern: /^1[34578]\d{9}$/, message: '请输入正确的11位电话号码'}
                    ],
                    checkid: [
                        {validator: vertifyCheck, trigger: 'blur'},
                        {required: true}
                    ],
                    username: [
                        {required: true, message: "请输入名称", trigger: 'blur'}
                    ],
                    
                    password: [
                        {validator: validatePass, trigger: 'blur'},
                        {required: true, min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur"}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'},
                        {required: true}
                    ]
                }
            };
        },

        methods: {
            goLogin(){
            this.$router.push('/login')
            },
            // 随机生成验证码
            getVertifyCode() {
                var code = '';
                for (var i = 0; i < 6; i++) {
                    var num = Math.round(Math.random() * 9);
                    code += num;
                }

                alert(code);
                this.vertify = code;
            },

            submitForm() {
                       this.$message.success('注册成功！')
                       this.$router.push('/login');
            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
.el-page-header {
  line-height: 60px;
  margin-left: 20px;
}
</style>
